<!--
 * new page
 * @author: denghao
 * @since: 2024-04-03
 * SongList.vue
-->
<template>
  <div
    class="songList"
    :class="{ 'songlist-active': item.id === songPlayDetail.id }"
    v-for="(item, index) in playList"
    :key="item.id"
    @click="handleSongItem(item, index)"
  >
    <div class="songList-index">{{ index + 1 }}</div>
    <div class="songList-name">{{ item.name }}</div>
    <div class="songList-name">{{ item.singer[0].name }}</div>
    <div class="songList-name">{{ item.album.name }}</div>
    <div class="songList-index">{{ formatSongTime(item.duration) }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";

import { useStore } from "vuex";
import { formatSongTime } from "@/utils/utils";
/**
 * ---------类型定义---------
 */

/**
 * ---------变量定义---------
 */

const store = useStore();
const playList = computed(() => store.getters.playList);
const songPlayIndex = computed(() => store.getters.songPlayIndex);
const songPlayDetail = computed(() => playList.value[songPlayIndex.value]);

/**
 * ---------方法---------
 */
const handleSongItem = (item: any, index: number) => {
  store.dispatch("getSongUrl", item.id);
  store.commit("setSongPlayIndex", index);
};
</script>

<style lang="scss" scoped>
.songList {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 44px;
  opacity: 1;
  border-radius: 12px;
  background: var(--largePlay-bg-color);
  margin-bottom: 4px;
  border: 1px solid rgba(17, 93, 239, 0.16);
  cursor: pointer;
  .songList-index {
    width: 5%;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
  }
  .songList-name {
    width: 25%;
    font-size: 14px;
    font-weight: 400;
  }
}
.songList:hover {
  background: var(--songList-bg-color);
}
.songlist-active {
  height: 44px;
  background: var(--songList-bg-color);
}
</style>
